<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 100px;
				height: 100px;
				background-color: skyblue;
				animation-name: donghua;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-iteration-count: 1;
				animation-direction: normal;
				animation-delay: 0ms;
				animation-fill-mode: forwards;
			}
			@keyframes donghua{
				from{
					transform: translate(0,0);
				}
				30%{
					transform: translate(500px,0);
				}
				to{
					transform: translate(500px,500px);
				}
			}
		</style>
	</head>
	<body>
			<div class="d1"></div>
	</body>
</html>